<template>
  <Page name="银行卡" :loading="!loading && page==1 && !config.end">
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <ScrollList :config="config" @bottom="getPage" @pull="pull">
      <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
      <div class="add">
        <nuxt-link :to="{name:'setting-add-card'}" >
          <img src="~/assets/img/brankcard_add.png" alt="">
        </nuxt-link>
      </div>
      <div class="bank">
        <ul>
          <li v-for="(item,index) in list" @click="goToEditBank(item)" >
            <h4>{{item.bank_name}}</h4>
            <p>{{item.bank_card_no | formatBankCardNo}}</p>
          </li>
        </ul>
      </div>

    </ScrollList>
  </Page>
</template>

<script>
/**
 * 银行卡号
 * @param {string} str
 */
function formatBankCardNo(str) {
    let result = '**** **** ****';
    let len = str.length;
    result = result + " " + str.substring(len-4,len);
    return result;
}
import Page from '~/components/page';
import ScrollList from '~/components/ScrollList';
import UILoading from  "~/components/loading";
import UiEmpty from  "~/components/empty";
export default {
  components: {
    Page,
    ScrollList,
    [UILoading.name]: UILoading,
    UiEmpty
  },
  data() {
    return {
      initLoading:true,
      config:{
        bottom:false,
        pull:false,
        end:false,
      },
      page:1,
      total:1,
      loading:false,
      list:[],
      empty:{
        text:"暂无数据"
      },
    };
  },
  filters:{
    formatBankCardNo(value){//数字千分位处理
      return formatBankCardNo(value);
    }
  },
  mounted(){
    (async ()=>{
      await this.getPage();
    })();
  },
  methods:{
    async pull(cb){
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.getPage(this.page,this.filerId ,true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(isRefresh){
      if(this.loading || this.config.end) return false;
      this.loading = true;
      try{
        let { data:rs } = await this.$axios.post('?ct=api&ac=bank_list',{
          page:this.page,
        })
        if(rs.code == 0){
          this.initLoading = false;
          const { data } = rs;
          this.total = Number(data.total);
          if(isRefresh){
            this.list = data.list;
          }else{
           this.list = this.list.concat(data.list);
          }
          
          if(this.total>this.list.length){
            this.page++;
          }else{
            this.config.end = true;
          }
        }else{
          this.initLoading = false;
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }

      this.loading = false;
    },
    goToEditBank(item){
      this.$router.push({name:'setting-edit-bank'});
      sessionStorage.setItem("bankInfo",JSON.stringify(item));
    }
  }
}
</script>

<style lang="less" scoped>
  .add{
    position: fixed;
    top:20px;
    right:30px;
    z-index: 999999999;
    img{
      width: 38px;
      height:38px;
    }
  }
  .bank{
    ul{
      li{
        width:610px;
        height:210px;
        background: url("~assets/img/brankcard_a.png") no-repeat left center;
        background-size:100% 100%; 
        margin:40px auto 0;
        padding:40px;
        color:#fff;
        &:nth-child(2n){
          background: url("~assets/img/brankcard_b.png") no-repeat left center;
          background-size:100% 100%; 
        }
        &:nth-child(3n){
          background: url("~assets/img/brankcard_c.png") no-repeat left center;
          background-size:100% 100%; 
        }
        h4{
          font-size:36px;
          margin-bottom:60px;
        }
        p{
          font-size:36px;
        }
      }

    }
  }
</style>
